<template>
  <div class="aboutMyself">
    <div class="clockItem">
      <div class="clock"></div>
    </div>
    <h2 class="aboutMyself-title">关于博主</h2>
    <div class="aboutMyself-content">
      <div>
        <el-icon><School /></el-icon> &nbsp; graduated from <a href="http://www.nsu.edu.cn/">&nbsp; Chengdu Neusoft University &nbsp;</a> in 2023
      </div>
      <div>
        <el-icon><Monitor /></el-icon> &nbsp; <a href="https://baike.baidu.com/item/%E7%89%A9%E8%81%94%E7%BD%91%E5%B7%A5%E7%A8%8B/55491661?fr=aladdin">&nbsp;Internet of Things Engineering</a> 
      </div>
      <div>
        <el-icon><List /></el-icon> &nbsp;  Learning and Practising Vue React TS Koa...
      </div>
      <div>
        <el-icon><Baseball /></el-icon> &nbsp; Strive to love life love sports
      </div>
      <div>
        <el-icon><Smoking /></el-icon> &nbsp; I have many bad habits
      </div>
      <div class="myselfImg">
        <div><img class="img1" src="https://stone-1315935641.cos.ap-chengdu.myqcloud.com/img%2Flanqiu.jpg" alt=""></div>
        <div><img class="img2" src="https://stone-1315935641.cos.ap-chengdu.myqcloud.com/img%2Ftaiqiu.jpg" alt=""></div>
        
        
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup >

</script>

<style lang="less" scoped>
a {
 color: rgb(220, 71, 71);
}
.aboutMyself {
  margin: 20px 0;
  border-radius: 15px;
  border-bottom: 2px solid rgb(95, 239, 93);
  .aboutMyself-title {
    padding: 5px 20px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.504);
  }
  .aboutMyself-content {
    padding: 20px 40px;
    div {
      display: flex;
      align-items: center;
      margin: 10px 0;
    }
    .myselfImg {
        display: flex;
        justify-content: space-around;
        img {
          width: 90%;
          height: auto;
        }
      }
  }

  .clockItem {
    display: flex;
    align-items: center;
    justify-content: center;
    .clock {
      position: relative;
      width: 80px;
      height: 80px;
      border: 3px solid rgb(14, 14, 14);
      border-radius: 100%;
    }
    .clock::before {
      content: '';
      position: absolute;
      bottom: 37px;left: 37px;
      width: 2px; height: 30px;
      transform-origin: 0 100%;
      background-color: rgb(14, 14, 14);
      animation: clock-rotate 1.5s infinite;
    }
    @keyframes clock-rotate {
      to {
        transform: rotate(359deg);
      }
    }
  }
}

</style>
